<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*内容公共样式*/
    .hot-panel h1,.news-panel h1,.chuzi_app h1,.forum h1{ 
        margin:0px;
        padding:0px;
        line-height: 60px;
        font-size: 18px;
        color:#666;
        font-weight:normal;
        text-indent: 40px;
        background: #FAFAFA;
        border-bottom: 1px solid #E6E6E6;
    }
    .hot-panel ul li{
        float: left;
        height:449px;
        background: #fff;
        width: 25%;
        position: relative;
        text-align: center;
        list-style: none;
    }
    .hot-panel ul li>img{
        width:206px;
        height: 206px;
        margin: 50px auto 30px;
    }
    .hot-panel ul li h2{
        font-size: 16px;
        font-weight: normal;
        margin:0px;
        padding:0px;
        
    }
    .hot-panel ul li p{
        font-size: 12px;
        color: #B2B2B2;
        line-height: 20px;
    }
    .hot-panel .price{
        position: absolute;
        bottom: 8%;
        width: 100%;
        left: 0;
        font-size: 18px;
        color: #DE4037;
        font-family: arial;
    }
    .finder{
        width:100%;
        position: absolute;
        z-index: 22;
        bottom: 75px;
        
        }
    .finder >img{
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1px solid #fff;
        margin:0 3px;
        }
    .finder >img:hover{
        box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.24);
        cursor: pointer;
        }
    .finder img:first-child	{
        box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.24);
        }
    .hot-panel ul li:hover .shoping{ /*鼠标经过效果  经过li 加入购物车和查看详情 出现*/
        display: block;
    }
    .hot-panel .shoping{
        width: 100%;
        position: absolute;
        bottom: 7%;
        display: none;
        z-index: 9;
    }	
    .shoping a{
        border: 1px solid #E6E6E6;
        font-size: 12px;
        width: 100px;
        height: 28px;
        display: inline-block;
        line-height: 28px;
        border-radius: 5px;
    }
    .shoping a.details{
        background: #f9f9f9;
        color: #646464;
    }
    .shoping a.details:hover{
        background: #ededed;
    }

    .shoping a.join-cart{
        background: #678ee7;
        color: #fff;
    }
    .shoping a.join-cart:hover{
        background: #6c8cd4;
    }
    .hot-panel ul li:hover .price{ /*鼠标经过效果  经过li 隐藏价格*/
        display: none;
    } 

    /*热门商品*/
    .selection ul li {
        border-bottom:#e6e6e6 1px solid;}
        
    .selection ul li:first-child
    {
        width:50%;
        }
    .selection ul li:first-child img{
        height:100%;
        width:100%;
        margin:0px;}
    .application{
        float:right;
        border:1px solid #e6e6e6;
        border-radius:5px;
        width:100px;
        height:35px;
        background:#FeFeFe;
        text-indent:0px;
        margin-top:10px;
        margin-right:20px;
        line-height: 35px;
        text-align:center;
        font-size:14px;
        color:#000;
        }
    .application:hover{
        background:#e6e6e6;
        }	
    </style>
</head>
<body>
    <!--热门商品-->
    <div class="hot-panel">
        <ul>
            <li>
                <img src="images/5-1.jpg" />
                <h2>Smartisan 坚果自拍杆</h2>
                <p>通用 3.5 mm 接口、航空铝合金伸缩杆</p>
                <div class="finder">
                    <img src="images/list01.jpg" />
                </div>
                <span class="price">￥69.00</span>
                <div class="shoping"> 
                    <a href="javascript: ;" class="details">查看详情</a>
                    <a href="javascript: ;" class="join-cart">加入购物车</a>
                </div>
                <a href="javascript: ;"></a>
            </li>
            <li>
                <img src="images/5-2.jpg" />
                <h2>《深泽直人》</h2>
                <p>首次向中国读者介绍其作品</p>
                <div class="finder">
                </div>
                <span class="price">￥199.00</span>
                <div class="shoping"> 
                    <a href="javascript: ;" class="details">查看详情</a>
                    <a href="javascript: ;" class="join-cart">加入购物车</a>
                </div>
                <a href="javascript: ;"></a>
            </li>
            <li>
                <img src="images/5-3.jpg" />
                <h2>Smartisan M1/M1L 软胶保护套</h2>
                <p>TPU环保材质、细腻防滑、防油污</p>
                <div class="finder">
                    <img src="images/list01.jpg" />
                    <img src="images/list02.jpg" />
                </div>
                <span class="price">￥49.00</span>
                <div class="shoping"> 
                    <a href="javascript: ;" class="details">查看详情</a>
                    <a href="javascript: ;" class="join-cart">加入购物车</a>
                </div>
                <a href="javascript: ;"></a>
            </li>
            <li>
                <img src="images/5-4.jpg" />
                <h2>Smartisan S-100 半入耳式耳机</h2>
                <p>卓越的 14.2mm 发音单元、三按键式线控</p>
                <div class="finder">
                    <img src="images/list01.jpg" />
                    <img src="images/list02.jpg" />
                    <img src="images/list01.jpg" />
                </div>
                <span class="price">￥69.00</span>
                <div class="shoping"> 
                    <a href="javascript: ;" class="details">查看详情</a>
                    <a href="javascript: ;" class="join-cart">加入购物车</a>
                </div>
                <a href="javascript: ;"></a>
            </li>
        </ul>
    </div>
</body>
</html>